<template>
  <el-dialog title="新建工单" :visible.sync="dialog" :modal="true" :modal-append-to-body="false">
    <div style="height:400px;overflow:auto;">
      <el-form :model="form">
        <el-form-item label="申报类型" :label-width="formLabelWidth">
          <el-select v-model="form.apply" placeholder="请选择申报类型">
            <el-option label="安装申请" value="A"></el-option>
            <el-option label="上门服务" value="B"></el-option>
            <el-option label="隐患处理" value="C"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择用户类型">
            <el-option label="用户类型A" value="A"></el-option>
            <el-option label="用户类型B" value="B"></el-option>
            <el-option label="用户类型C" value="C"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="关联设备"
          :label-width="formLabelWidth"
          v-if="form.apply==='B'||form.apply==='C'"
        >
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1, 2, 3]"
            :default-checked-keys="[]"
            :props="defaultProps"
          ></el-tree>
        </el-form-item>
        <el-form-item label="组织机构" :label-width="formLabelWidth">
          <el-input readonly placeholder="请选择组织机构"></el-input>
        </el-form-item>
        <el-form-item label="岗位" :label-width="formLabelWidth">
          <el-input readonly placeholder="请选择岗位"></el-input>
        </el-form-item>
        <el-form-item label="岗位" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button type="primary" @click="dialog = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "addnet",
  data() {
    return {
      fileList: [],
      formLabelWidth: "100px",
      dialog: false,
      loading: false,
      form: {
        name: "",
        apply: "A",
        region: ""
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      data: [
        {
          id: 1,
          label: "网关1",
          children: [
            {
              id: 4,
              label: "设备 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "网关 2",
          children: [
            {
              id: 5,
              label: "设备 2-1"
            },
            {
              id: 6,
              label: "设备 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "网关 3",
          children: [
            {
              id: 7,
              label: "设备 3-1"
            },
            {
              id: 8,
              label: "设备 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  watch: {
    "form.apply": function(val) {
      if (val === "B" || val === "C") {
        console.log(val);
      }
    }
  },
  methods: {
    cancel() {},
    doSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.dialog = false;
          console.log(this.$refs);
          console.log(this.$parent.value);
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style lang="scss">
</style>
